<template>
  <!-- 催收执行页-历史信息模块-法务行动记录 -->
  <section class="component legal-urge-history">
    <!-- 搜索区域 -->
    <data-form :model="searchModel" @onSearch="refreshData" ref="form">
      <template slot="inputs">
        <el-form-item label="处理方式：" prop="treatmentType">
          <el-select placeholder="请选择" v-model="searchModel.treatmentType" clearable>
            <el-option v-for="item in $dict.getDictData('TreatmentType')" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="法院/仲裁委：" prop="court">
          <el-input v-model="searchModel.court" clearable></el-input>
        </el-form-item>
      </template>
    </data-form>
    <!-- 数据列区域 -->
    <data-box @onPageChange="refreshData" :data="dataSet" :page="pageService" :height="200" :default-sort="{prop: 'timeCreated', order: 'descending'}">
      <template slot="columns">
        <!-- <el-table-column
          label="登记时间"
          :min-width="$helper.getColumnWidth(5)"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.timeCreated | dateTimeFormat }}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="timeCreated" label="登记时间" :min-width="$helper.getColumnWidth(5)" :formatter="(row) => $filter.dateTimeFormat(row.timeCreated)" sortable>
        </el-table-column>
        <!-- <el-table-column prop="operatorRealName" label="登记人员" :min-width="$helper.getColumnWidth(3)">
        </el-table-column> -->
        <el-table-column prop="operatorCode" label="操作员号" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="treatmentType" label="处理方式" :min-width="$helper.getColumnWidth(5)" :formatter="
            row => $filter.dictConvert(row.treatmentType, 'TreatmentType')
          ">
        </el-table-column>
        <!-- <el-table-column
          prop="plaintiffInfo"
          label="原告信息"
          :min-width="$helper.getColumnWidth(5)"
          :formatter="row => $filter.dictConvert(row.plaintiffInfo,'PlaintiffInformation')"
        >
        </el-table-column> -->
        <el-table-column prop="plaintiffInfo" label="原告信息" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="defendantName" label="被告人姓名" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="court" label="法院/仲裁委" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="isRegister" label="是否立案" :min-width="$helper.getColumnWidth(5)" :formatter="row => $filter.dictConvert(row.isRegister, 'CommonFlag')">
        </el-table-column>
        <el-table-column prop="isOpen" label="是否开庭" :min-width="$helper.getColumnWidth(5)" :formatter="row => $filter.dictConvert(row.isOpen, 'CommonFlag')">
        </el-table-column>
        <el-table-column prop="isExecute" label="是否执行" :min-width="$helper.getColumnWidth(5)" :formatter="row => $filter.dictConvert(row.isExecute, 'CommonFlag')">
        </el-table-column>
        <el-table-column prop="isClose" label="是否结案" :min-width="$helper.getColumnWidth(5)" :formatter="row => $filter.dictConvert(row.isClose, 'CommonFlag')">
        </el-table-column>
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(5)">
          <template slot-scope="scope">
            <el-button class="search-button" @click="onClickDetail(scope.row)" type="text">查看详情</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
    <!--新增/修改委托方-->
    <!-- <el-dialog :title="'编辑法务行动'" :center="true" :visible.sync="dialog.modify" width="700px" @open="$nextTick(()=>$refs['legal-urge-action-area'].update(clientObj))" @close="$refs['modify-client'].reset()" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <legal-urge-action-area ref="legal-urge-action-area" @close="dialog.modify = false" @refreshList="refreshData"></legal-urge-action-area>
    </el-dialog> -->
    <el-dialog :title="titleName" :center="true" :visible.sync="dialog.modify" width="700px" :show-close="true" :close-on-click-modal="false" :close-on-press-escape="false" @close="$refs['legal-urge-action-area'].refreshData()">
      <legal-urge-action-area :useShow="true" v-if="dialog.modify" ref="legal-urge-action-area" @close="dialog.modify = false" @refreshList="refreshData" :isDetail="isDetail" :id="id" :operatorId="row.operatorId"></legal-urge-action-area>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Prop, Provide, Watch } from "vue-property-decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import LegalUrgeActionArea from "~/components/collection-execution/collection-action-area/legal-urge-action-area.vue";
import { State, namespace } from "vuex-class";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import { CASE_CHANNEL } from "~/config/enum.config";
import { CaseLegalRecordService } from '~/services/domain-service/case-legalRecord.service';
// import { retry } from "node_modules/rxjs/operators";
const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    LegalUrgeActionArea
  }
})
export default class LegalUrgeHistory extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @CollectionExecutionModule.State private caseId;
  @State private userData;
  @Dependencies(CaseLegalRecordService) private caseLegalRecordService: CaseLegalRecordService;
  @CollectionExecutionModule.State private historyInfoActiveName;

  private searchModel: any = {
    legalHandleType: "",
    courtName: ""
  };
  private dialog: any = {
    modify: false
  };
  private dataSet: any[] = [];
  private id: any = null;
  private row: any = {};
  private isDetail = false
  private get titleName () {
    return this.row.operatorId === this.userData.id
      ? "编辑法务行动"
      : "详情法务行动";
  }

  //重置搜索条件
  private resetSearchFelid () {
    const form: any = this.$refs["form"];
    form.resetForm();
  }

  //获取法务行动历史
  private refreshData () {
    console.log('refreshData');

    this.searchModel.caseId = this.caseId;
    // this.caseOperatorPageService
    //   .queryCaseLegalRecord(
    //     this.searchModel,
    //     this.pageService,
    //     this.sortService
    //   )
    //   .subscribe(data => {
    //     this.dataSet = data;
    //   });
    this.caseLegalRecordService
      .getCaseLegalRecord(
        this.searchModel,
        this.pageService,
        this.sortService
      )
      .subscribe(data => {
        this.dataSet = data;
      });
  }

  private activated () {
    this.refreshData();
  }

  private onClickDetail (row) {
    this.id = row.id;
    this.row = row;
    this.dialog.modify = true;
    this.isDetail = true;

    setTimeout(() => {
      // 拿到子组件实例对象,调用它的 setNeedErrorMsg 方法
      ;(this.$refs['legal-urge-action-area'] as any).setNeedErrorMsg(false)

    }, 100);
  }
}
</script>

<style lang="less" scoped></style>
